<template>
  <div class="container-questions">
    <!-- 头部 -->
    <div>
      <el-card class="box-card">
        <el-row>
          <!-- 说明提示 -->
          <el-col :span="18">
            <span style="color: pink">说明：目前支持学科和关键字条件筛选</span>
          </el-col>
          <!--/ 说明提示结束 -->

          <!-- 按钮 -->
          <el-col :span="6" style="text-align: right">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="$router.push('new')"
              >新增试题</el-button
            >
          </el-col>
          <!-- 按钮结束 -->
        </el-row>

        <!-- /头部结束 -->

        <!-- 选择框区域 -->
        <div class="Select-box">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            :label-position="labelPosition"
            id="myForm"
          >
            <!-- 第一行 选择框 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    v-model="form.subject"
                    placeholder="请选择"
                    size="medium"
                    @click="getSubjectData"
                    @change="tagsSimple()"
                  >
                    <el-option
                      v-for="(item, index) in subjects"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select v-model="form.directoryTOW" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in directoryTOWs"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="form.tags" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in tags"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input v-model="form.keyword"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 选择框-->
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="form.questionType" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in questionType"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="form.difficulty" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in difficulty"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="form.direction" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in direction"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="form.administrator" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in administrator"
                      :key="index"
                      :label="item.username"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行 选择框-->
            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="form.titleNotes"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model="form.enterprise"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-col :span="11">
                    <el-select
                      v-model="form.city"
                      placeholder="选择城市"
                      @change="getArea"
                    >
                      <el-option
                        v-for="(item, index) in city"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-select v-model="form.area" placeholder="选择地区">
                      <el-option
                        v-for="(item, index) in area"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: flex;
                                     justify-content: flex-end;">
                  <el-button plain @click="clear">清空</el-button>
                  <el-button
                    type="primary"
                    plain
                    @click="addSelectedQuestions()"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 消息提示的文案 -->
          <el-alert
            :title="`数据一共${counts}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 选择框区域结束 -->

        <!--学科 表格 -->
        <el-table class="table" :data="subjectsList" style="width: 100%">
          <el-table-column prop="number" label="试题编号"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'"> 单选 </span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else-if="scope.row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">{{
              scope.row.addDate | parseTimeByString
            }}</template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'"> 简单 </span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else-if="scope.row.difficulty === '3'">困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="200%">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                icon="el-icon-view"
                circle
                @click="previewQuestion(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                circle
                @click="$router.push(`new?id=${scope.row.id}`)"
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                @click="deleteSubjects(scope.row.id)"
              />
              <el-button
                type="warning"
                plain
                icon="el-icon-check"
               
                circle
                 @click="addQuestions(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--/ 表格结束 -->

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="querInfo.page"
            :page-sizes="[3, 5, 10, 15, 20]"
            :page-size="querInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper "
            :total="counts"
          >
          </el-pagination>
        </div>
        <!-- /分页 -->
        <!-- <questions-preview
          v-show="ctrlloter"
          :dialogVisible="ctrlloter"
          @formson="fromsonFn"
        ></questions-preview> -->
        <!-- 预览对话框 -->
        <questions-preview
          ref="questionsPreviewRef"
          :previewData="previewData"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
//导入预览题型页面
import QuestionsPreview from "../components/questions-preview";
//获取学科列表
import {
  list as getSubjectsOFList,
  remove,
  choiceAdd,
  detail as questionDetail,
} from "@/api/hmmm/questions.js";
//获取学科值
import { simple as getSubjectsList } from "@/api/hmmm/subjects.js";
//获取二级目录
import { simple as getDirectorys } from "@/api/hmmm/directorys.js";
//标签
import { simple as getSubjectsTags } from "@/api/hmmm/tags.js";
//管理员
import { simple as getAdministrator } from "@/api/base/users.js";

import { provinces, citys } from "@/api/hmmm/citys.js";

import { questionType, difficulty, direction } from "@/api/hmmm/constants.js";

export default {
  // 组件名称
  name: "Questions",
  // 局部注册的组件
  components: {
    QuestionsPreview,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      previewData: {}, //预览的当前试题数据
      // //控制预览题型显示与隐藏
      // ctrlloter: false,
      //分页
      querInfo: {
        //当前页码值
        page: 1, //控制当前页码值  :current-page="querInfo.pagenum"
        //一页显示多少条
        pagesize: 3, //用于初始化多少条数据  :page-size="querInfo.pagesize"
      },
      //form
      labelPosition: "right",

      form: {
        tags: "", //存储下拉选择框的 标签 下拉框数据
        subject: "", //存储下拉选择框的 学科 下拉框数据
        directoryTOW: "", //存储下拉选择框的 二级目录 下拉框数据
        area: "", //存储下拉选择框的 城市地区 下拉框数据
        city: "", //存储下拉选择框的 城市 下拉框数据
        questionType: "", //存储下拉选择框的 试题类型 下拉框数据
        difficulty: "", //存储下拉选择框的 难度 下拉框数据
        direction: "", //存储下拉选择框的 方向 下拉框数据
        administrator: "", //存储下拉选择框的 录入人 下拉框数据
        keyword: "", //关键字
        titleNotes: "", //题目备注
        enterprise: "", //企业简称
      },

      subjectsList: [], //学科 列表
      subjects: [], //学科 数据
      directoryTOWs: [], //二级目录 数据
      tags: [], //标签 数据
      administrator: [], //管理员
      city: [], //城市
      area: [], //城市地区

      questionType, //试题类型
      difficulty, //难度
      direction, //方向

      counts: 0, // 查询学科条数
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  created() {
    this.getSubjectData();
    this.getAdministrator();
    this.getSubjects();
    this.city = provinces();
  },
  mounted() {},
  // 组件方法
  methods: {
    //控制预览题型显示与隐藏
    // showson() {
    //   this.ctrlloter = true;
    // },
    async previewQuestion(id) {
      // console.log(id);
      this.$refs.questionsPreviewRef.isPreviewDialogVisible = true;
      const { data: res } = await questionDetail({ id });
      console.log(res);
      this.previewData = res;
    },
    //控制预览题型显示与隐藏
    fromsonFn(val) {
      this.ctrlloter = val;
    },
    //获取城市地区
    getArea() {
      this.area = citys(this.form.city);
    },
    //每页条数
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize;
      this.getSubjects();
    },
    //页码值变动
    handleCurrentChange(newPage) {
      this.querInfo.page = newPage;
      this.getSubjects();
    },
    clear() {
      document.getElementById("myForm").reset();
    },
    //获取学科
    async getSubjectData() {
      try {
        const { data } = await getSubjectsList();
        this.subjects = data;
      } catch (error) {
        console.log("出错了");
      }
    },
    //chang事件
    tagsSimple(value) {
      // //调用获取二级目录数据
      this.getDirectorysTOW();
      //调用获取标签数据
      this.getTags();
      //清空选择框
      this.form.tags = "";
      this.form.directoryTOW = "";
    },
    //获取二级目录
    async getDirectorysTOW() {
      try {
        const { data } = await getDirectorys({ subjectID: this.form.subject });
        this.directoryTOWs = data;
      } catch (error) {
        console.log("报错了");
      }
    },
    //获取标签数据
    async getTags() {
      try {
        const { data } = await getSubjectsTags({
          subjectID: this.form.subject,
        });
        this.tags = data;
      } catch (error) {}
    },
    //获取管理员
    async getAdministrator() {
      try {
        const { data } = await getAdministrator();
        this.administrator = data;
      } catch (error) {}
    },
    //获取学科数据列表
    async getSubjects() {
      try {
        const { data } = await getSubjectsOFList(this.querInfo);
        this.counts = data.counts;
        this.subjectsList = data.items;
      } catch (error) {
        console.log("出错了");
      }
    },
    //删除
    async deleteSubjects(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已经取消删除");
      }
      try {
        const { data } = await remove({
          id: id,
        });
        this.getSubjects();
      } catch (error) {}
    },
    //加入精选题库
    async addQuestions(id) {
     
      const confirmResult = await this.$confirm(
        "此操作将该题目加入精选, 是否继续?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
    
      if (confirmResult !== "confirm") {
        return this.$message.info("已经取消删除");
      }
      try {
        await choiceAdd({ id: id, choiceState: 1 });
        this.getSubjects();
      } catch (error) {}
    },

    //搜索
    async addSelectedQuestions() {
      const { data } = await getSubjectsOFList({
        page: 1,
        pagesize: 3,
        subjectID: this.form.subject,
        keyword: this.form.keyword,
      });
      this.subjectsList = data.items;
    },
    //刷新数据
    refresh() {
      document.getElementById("myForm").reset();
      this.getSubjects();
    },
  },
};
</script>

<style scoped lang='scss'>
.container-questions {
  padding: 10px 15px;
}

.el-select {
  width: 100%;
}
.Select-box {
  margin-top: 15px;
}
.table {
  margin-top: 15px;
}
.block {
  margin-top: 20px;
  text-align: center;
}
</style>